<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@  taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@ taglib prefix="my" uri="http://gson.cn/jsp/jstl/mytags" %>
    
    <%
           String path = request.getContextPath();
           String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="static/css/shop.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
<base href="<%= basePath%>">
</head>
<body style="overflow:-Scroll;overflow-x:hidden">
<div id="test"></div>
 <div class="big-box">
  <div><a name="zzz"></a></div>
  			<div id="zhuce">
					<div class="zhuce-title">
							<h1>欢迎注册联想会员</h1>
    						<div onclick="guan()" class="close"></div>
    				</div>
    				<div class="zhuce-input">
    					<p><lable>账号</lable><input class="account" id="n" name="uname" placeholder="请输入手机号"/></p>
    				</div>
    				<div class="enroll_inputaa ">
    					<p id="yi">请输入正确的格式</p>
    				</div>
    				<div class="enroll_inputb">
    					<p><lable>密码</lable><input type="password" name="pass" id="m" class="account" placeholder="密码长度8~20位,数字、字母、字符至少包含两种"/></p>
    				</div>
    				<div class="enroll_inputbb ">
    					<p id="er">密码长度不符合</p>
    				</div>
    				<div class="enroll_inputc">
    					<p><lable>确认密码</lable><input name="pass-t" id="t" type="password"class="account" ></p>
    				</div>
    				<div class="enroll_inputaa errorRepwd">
    					<p class="error" id="san">确认密码和密码不一致，请重新输入</p>
    				</div>
    				<div class="enroll_inputd">
    					<p><lable>验证码</lable><input type="text" class="captcha_code" name="yz" id="y"placeholder="请输入验证码"></p>
    					<img id="yzm" src="getcaptcha" onclick="changeImg();return false;" class="yanzhengma"><span class="huan" onclick="changeImg();return false;" >换一张</span>
    				</div>
    				<div class="enroll_inputaa">
    					<p>验证码错误</p>
    				</div>
    				  <div class="enroll_inputd">
    					<p><lable>手机验证码</lable><input type="text" id="sjyzm" class="captcha_code"></p><button id="huo" class="mobile_captcha" style="margin-left:3px;width: 120px; background: #c2c2c2;border: none;    height: 28px;cursor: poiner;">获取手机验证码</button>
    				</div>
    				<div class="enroll_inputaa"></div>
    				<div class="enroll_main">
    					<lable>
    						<input type="checkbox" class="chk"/>
    						<p>同意联想的<a>使用条款</a>和<a>隐私权政策</a></p>	
    					</lable>
    				<div class="enroll_btn">
    						<input type="button" id="subb" class="ljzc" value="立即注册" style="margin-left:-55px;width:330px;height:30px;background:#ef1c22;border:none;color:white;border-radius:7px;"/>
    				</div>
    				</div>
				</div>
			<div id="denglu">
					<div class="login">
						<div class="now">普通登录</div>
						<div class="nows">快捷登录</div>
						<div onclick="cancel_shield()" class="close"></div>
					</div>
					<div class="login-input">
						<div class="use">
							<img src="static/img/icon03.jpg" class="input-img"/>
							<input type="text" name="uuname" class="name1" placeholder="请输入手机号或邮箱"/>
						</div>
					</div>
					<div class="login-inputb">
						<div class="pwd">
							<img src="static/img/icon04.jpg" class="input-img"/>
							<input type="password" name="uupwd" class="name1" placeholder="密码"/>
						</div>
					</div>

					<div class="login-main">

					</div>
					<div class="zidong">
						<input type="checkbox" name="" class="persistent"><p>自动登录</p>
					</div>
					<div class="login-btn">
						<input type="button" id="sub" value="登录" style="width:330px;height:30px;background:#ef1c22;border:none;color:white;border-radius:7px;
						"/>
					</div>
					<div class="login-zhu">
						<p>
							<a class="zhuc" onclick="zhu()">立即注册</a>
							<a class="mima">忘记密码</a>
						</p>
					</div>
					<div class="cooperation">
						使用合作网站账号登录:
						<div class="cooperation_items">
							<a>
								<img src="static/img/ico_qq.png"/>
								<img src="static/img/ico_wc.png"/>
								<img src="static/img/ico_sina.png"/>
								<img src="static/img/ico_zfb.png"/>
							</a>
						</div>
					</div>
			
			</div>
		<div class="top-box">
				<img src="static/img/0d66fb8c-f7b0-4d2c-888c-51d56f67aeab_1.jpg" class="top-img"/>
				<img src="static/img/6bb4a0dd-a799-468c-8f84-ebeb5fce771a.jpg" class="top-img2"/>
				<ul class="ulone">
					<li>联想首页</li>
					<li>商城</li>
					<li>社区</li>
					<li>服务</li>
					<li>资讯</li>
					<li>门店</li>
					<li class="topimg">手机版<span class="ii"></span></li>
				</ul>
				<div class="qq"><img src="static/img/mmqrcode1515487661338.png"/></div>
		</div>
		<div class="two-box">
			<ul class="ultwo">
				<li class="aa">全部分类</li>
				<li>联想合伙人</li>
				<li>私人订制</li>
				<li>急速达</li>
				<li>积分兑换</li>
				<li>小新店铺</li>
				<li>学生专区</li>
				<li>商用专区</li>
			</ul>
			<div class="fenlei">
						<ul class="fen">
							<li class="yi">Lenovo电脑<div class="one">1</div></li>
							<li class="er"><a href="jsps/shop.jsp" style="color:black; text-decoration:none;">ThinkPad 电脑</a><div class="two">2</div></li>
							<li class="san">平板电脑<div class="three">3</div></li>
							<li class="si">手机<div class="four">4</div></li>
							<li class="wu">通讯卡<div class="five">5</div></li>
							<li class="liu">智能电视<div class="six">6</div></li>
							<li class="qi">打印机<div class="seven">7</div></li>
							<li class="ba">选件<div class="eight">8</div></li>
							<li class="jiu">智能家庭<div class="nine">9</div></li>
							<li class="shi">服务升级<div class="ten">10</div></li>
						</ul>
				</div>
			<div class="find">
				<input type="text" name="" placeholder="智能头盔" class="input-one">
				<span class="find-box"><span class="find-img"></span></span>
			</div>
		<c:if test="${empty use}">  
			<div class="Personal-img" onclick="shield()"></div>
		</c:if>
			
		<c:if test="${not empty use}">
			<div class="yetlogin"></div>
				<div class="ni" style="display:none;padding: 10px 5px;border: 1px solid #d3d3d3;width:130px;height:108px;float:right;position:absolute;left:1120px;top:75px;z-index:10001;background:white;'">
						<ul style="list-style:none;text-align:center;font-size: 14px;position: relative;cursor: pointer;height:38px;
    line-height: 38px;">
				<li><span>${use.get(0).uphone}</span></li>
				<li>我的商城</li>
				<li>退出登录</li>
			</ul>
		</div>
		</c:if>
			<div class="shop-img"></div>
		</div>
		<div class="suspend">
			<ul id="left">
				<li class="tu-1"></li>
				<li class="tu-2"></li>
				<li class="tu-3"></li>
				<li class="tu-4"></li>
				<li class="tu-5"></li>
				<a href="#zzz"><li class="tu-6"></li></a>
			</ul>
		</div>
		
		<div class="center">
			<ul>
				<li class="active">个人&家用产品</li>
				<li class="sep">丨</li>
				<li>商用产品&解决方案</li>
				<li class="sep">丨</li>
				<li>手机&周边产品</li>
			</ul>
		</div>
		<!--包住筛选条件的大盒子 -->
			<div class="xuanze">
				<!--便捷导购大盒子 -->
				<div class="bigbian">
					<div class="bian">ThinkPad：</div>
					<div class="leix">
						<ul>
							<li><a href="">T系列</a></li>
							<li><a href="">E系列</a></li>
							<li><a href="">X1系列</a></li>
							<li><a href="">S系列</a></li>
							<li><a href="">X系列</a></li>
							<li><a href="">P系列</a></li>
							<li><a href="">A系列</a></li>
							<li><a href="">R系列</a></li>
						</ul>
					</div>
				</div>
				
				<!--价格的大盒子-->
				<div class="bigmoeny">
					<div class="bian">CPU型号：</div>
					<div class="leix">
						<ul>
							<li><a href="">inter i5</a></li>
							<li><a href="">intel i7</a></li>
						</ul>
					</div>	
				</div>
			</div>
			<div class="senior">
				<div class="senior-center">
					<a href="">推荐</a>
					<a href="">丨</a>
					<a href="">新品</a>
					<a href="">丨</a>
					<a href="">价格</a>
					<a href="">丨</a>
					<a href="">评价最多</a>
						<div class="input-two">
								<input class="input-three" type="text" name="" placeholder="￥" style="width:40px;"/>
								<span class="price">-</span>
								<input class="input-four" type="text" name="" placeholder="￥" style="width:40px;"/>
								<input type="text" placeholder="在结果中搜索" style="margin-left:20px;"/>
								<input class="sure" type="button" value="确定" style="width:40px;height:22px; margin-left:5px;"/>
						</div>
							<div class="check ">
									<a href=""><i class="i"></i><span>急速达</span></a>
									<a href=""><i class="i"></i><span>私人订制</span></a>
									<a href=""><i class="i"></i><span>分期付款</span></a>
									<a href=""><i class="i"></i><span>以旧换新</span></a>
							</div>
				</div>
			</div>
			<div class="center-box">
				<div class="center-twobox">
					<ul>
						<c:forEach items="${pages.rows}" var="g">
							<li>
								<a href="shop_xq?gspbh1=${g.gspbh1}&shop_xq?atid=${g.atid}&shop_xq?moid=${g.moid}">
									<a href="shop_xq?gspbh1=${g.gspbh1}&shop_xq?atid=${g.atid}&shop_xq?moid=${g.moid}" class="search_pro_img"><img src="${g.iway}"/></a>
									<div class="li-center">
										<i class="private"></i>
										<i class="periodization "></i>
										<i class="new"></i>
										
									<span class="lijian">立减</span>
									</div>
									<div class="li-name"><a>${g.gtradename}</a><a>  ${g.gspbh1}</a></div>
									<div class="li-collocation"><a>${g.gbewrite}</a></div>
									<div class="li-price"><a style="cursor: pointer;">￥${g.gprice}</a></div>
									</a>
							</li>
						</c:forEach>
				</ul>
				</div>	

				<div class="pagelist">
					<my:page pages="${pages}" url="pagelist"></my:page>
				</div>
				<div class="bottom-img"><img src="static/img/8518047e-a59d-4123-ad1f-4a68391ec161.jpg"/></div>
				<div class="bottom-mid">
						<div class="footer">
								<div class="bottom-ns">
										<div class="bottom-one">
												<ul>
													<li style="font-size:14px;">购物指南</li>
													<li>服务商信息</li>
													<li>购买流程</li>
													<li>注册登录</li>
												</ul>
												<ul>
													<li style="font-size:14px;">配送方式</li>
													<li>配送方式</li>
													<li>配送方式信息</li>
													<li>签收原则</li>
													<li>物流查询</li>
												</ul>
												<ul>
													<li style="font-size:14px;">支付方式</li>
													<li>分期支付</li>
													<li>支付方式</li>
													<li>支付问题</li>
												</ul>
												<ul>
													<li style="font-size:14px;">订单信息</li>
													<li>分订单信息</li>
													<li>发票信息</li>
												</ul>
												<ul>
													<li style="font-size:14px;">售后服务</li>
													<li>售后服务总则</li>
													<li>24小时在线客服</li>
												</ul>
												<ul>
													<li style="font-size:14px;">其他说明</li>
													<li>服务承诺</li>
													<li>账户安全</li>
													<li>产品安全</li>
													<li>手机产品购买须知</li>
													<li>环境信息</li>
												</ul>
										</div>
												
								</div>
						</div>
				</div>
			</div>
</div>
 </body>
</html>
		<script src="static/js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript">
	$('.ii').hover(
	function(){
		$('.qq img').slideToggle();
	});

	//滚动滚动条出现
	window.onscroll = function(){ 
  var t = document.documentElement.scrollTop || document.body.scrollTop; 
  //侧边悬浮条
  var top_div = document.querySelector(".suspend"); 
  //顶部联想log
  var top_img = document.querySelector(".top-img");
  var top_img2 = document.querySelector(".top-img2");
  if( t >= 1 ) { 
    top_div.style.display = "block"; 
	//top_div.style.position="fixed";
	top_div.style.top="170px";
  } else { 
    top_div.style.display = "none"; 
	//top_div.style.position="fixed";
	top_div.style.top="170px";
  } 
  if(t>20){
	top_img.style.display="none";
	top_img2.style.display="block";
	}else{
	top_img.style.display="block";
	top_img2.style.display="none";
	}
} 
	//登录框
	function shield(){
	    var s = document.getElementById("test");
	    s.style.display = "block";
	    var l = document.getElementById("denglu");
	    l.style.display = "block";
	}
	function cancel_shield(){
	    var s = document.getElementById("denglu");
	    s.style.display = "none";
	    
	    var l = document.getElementById("test");
	    l.style.display = "none";
	}
	function zhu(){
	    var z = document.getElementById("zhuce");
	    z.style.display="block";
	    var l = document.getElementById("test");
	    l.style.display = "block";
	    var s = document.getElementById("denglu");
	    s.style.display = "none";
	}
	function guan(){
	    var q = document.getElementById("zhuce");
	    q.style.display="none";
	    var l = document.getElementById("test");
	    l.style.display = "none";
	}
	$('.nows').click(function(){
		$('#denglu').empty();
		$('#denglu').load("jsps/shortcut.jsp");
	});	
	
	function likai(){
    var s = document.getElementById("yi");
    var a = document.getElementById("n");
	if(a.length>11 || a.length<11){
		s.style.display="block";
	}
	} 
 $(function(){	
	$('#n').blur(function(){
 	if($("#n").val().length !=11 ||isNaN($('#n').val())){
			 $('#yi').css({"display":"block"});
		 }else if($("#n").val().length ==11){
			 $('#yi').css({"display":"none"});
		 }
	});
	$('#m').blur(function(){
 	if($('#m').val().length>16 ||$('#m').val().length<6){
		 $('#er').css({"display":"block"});
 		}else if($('#m').val().length<=16||$('#m').val().length==0){
 			 $('#er').css({"display":"none"});
 		}
	});
	$('#t').blur(function(){
		if($('#t').val()!=$('#m').val()){
		 $('#san').css({"display":"block"});
		}else if($('#t').val()==$('#m').val())  {
		 $('#san').css({"display":"none"});

		}
		
	});
	$('y').blur(function(){
		if('regist'){
			
		}
	});
	
	//图片验证码
	$('input[name=yz]').blur(function(){
		//ajax访问后台
		$.get("regist",{yz:$(this).val()},
			function(data){
				//把错误信息回显到页面
				$('.errors').text(data);
				$('.enroll_inputaa').css({"display":"block"});
		});
	});
	
	//短信验证码
	$(function(){
		$(".huo").click(function(){
			if($("#n").val()!="" && $("#sjyzm").val()!=""){
				location.href="messagelogin?yzm="+$('#sjyzm').val();
			}
		});
	});
	function get_mobile_code(){
        $.post('messagecheck', {mobile:jQuery.trim($('#n').val())}, function(msg) {
            alert(jQuery.trim(unescape(msg)));
			if(!(isNaN(msg))){
				$('#n').val(sjyzm);
				RemainTime();
			}
        });
	};
	var iTime = 59;
	var Account;
	function RemainTime(){
		document.getElementById('huo').disabled = true;
		var iSecond,sSecond="",sTime="";
		if (iTime >= 0){
			iSecond = parseInt(iTime%60);
			iMinute = parseInt(iTime/60)
			if (iSecond >= 0){
				if(iMinute>0){
					sSecond = iMinute + "分" + iSecond + "秒";
				}else{
					sSecond = iSecond + "秒";
				}
			}
			sTime=sSecond;
			if(iTime==0){
				clearTimeout(Account);
				sTime='获取手机验证码';
				iTime = 59;
				document.getElementById('huo').disabled = false;
			}else{
				Account = setTimeout("RemainTime()",1000);
				iTime=iTime-1;
			}
		}else{
			sTime='没有倒计时';
		}
		document.getElementById('huo').value = sTime;
	}

	
	
 });
	//点击更换图形验证码
function changeImg(){
	var imgs = document.getElementById('yzm');
	imgs.src = "getcaptcha?temp="+new Date().getTime().toString();
}

	//登录
$(function(){
	$('#sub').click(function(){
		$.post("dengl",{
			"uuname":$("input[name='uuname']").val(),"uupwd":$("input[name='uupwd']").val()		
		},function(data){
			if(data=='okk'){
				 window.location.href="pagelist"; 
			}else{	
				alert('账号或密码错误');
			}
		});
	});
	
});

	//注册
$(function(){
	$('#subb').click(function(){
		$.post("zhuc",{
			"uname":$("input[name='uname']").val(),"pass":$("input[name='pass']").val(),"pass-t":$("input[name='pass-t']").val()
		},function(zz){
			if(zz=='ok'){
				 window.location.href="pagelist"; 
			}else if(zz=='two'){
				alert('账号和密码为空');
			}else if(zz=='chang'){
				alert('手机号长度不符合！');
			}else if(zz=='zai'){
				alert('用户名已注册');
			}
		});
		
	});
	$('.yetlogin,.ni').hover(function(){
		$('.ni').slideToggle();
	});
});
	

</script>